import React, { Component } from 'react'
import '../assert/css/reg.css'
import Header from '../components/DefaultHeader'


export default class Reg extends Component {
    state = {
        phone: '',
        nickname: '',
        password: '',
    }
    reg() {
        const { phone, nickname, password } = this.state
        //   校验
        if (phone == '') {
            return alert('手机号不能为空')
        }
        if (nickname == '') {
            return alert('昵称不能为空')
        }
        if (password == '') {
            return alert('密码不能为空')
        }
        // 提交数据
        this.$axios.post('/register',{phone,nickname,password}).then(
            res=>{
                // 置空表单
                this.setState({ phone: '', nickname: '', password: '' })
                // 提示登录成功
                alert('注册成功')
                // 跳转到登录页
                this.props.history.push('/login')
            }
        )

    }
    render() {
        const { phone, nickname, password } = this.state
        return (
            <>
                <div className="reg-container">
                <Header title='会员注册' right_text='登录' right_method={()=>this.props.history.push('/login')}/>
                    <div className="logo"></div>
                    <div className="form">

                        <div className="form-group">
                            <input value={phone} onChange={(e) => this.setState({ phone: e.target.value.trim() })} type="text" placeholder="手机号" />
                        </div>
                        <div className="form-group">
                            <input value={nickname} onChange={(e) => this.setState({ nickname: e.target.value.trim() })} type="text" placeholder="昵称" />
                        </div>
                        <div className="form-group">
                            <input value={password} onChange={(e) => this.setState({ password: e.target.value.trim() })} type="password" placeholder="密码" />
                        </div>
                        <div className="form-group">
                            <button onClick={() => this.reg()} className="btn-gray">注册</button>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
